<template>
	<view>
	 <!-- 表单 -->
	<u--form
	 				labelPosition="left"
	 				:model="model1"
	 				:rules="rules"
	 				ref="form1"
	 		>
	 			<u-form-item
	 					label="姓名"
	 					prop="userInfo.name"
	 					borderBottom
	 					ref="item1"
	 			>
			
	 				<u--input
	 						v-model="model1.userInfo.name"
							placeholder="请输入姓名"
	 						border="none"
	 				></u--input>
	 			</u-form-item>
				<u-form-item
						label="身份证"
						prop="userInfo.id_card"
						borderBottom
						ref="item1"
				>
							
					<u--input
							v-model="model1.userInfo.id_card"
							placeholder="请输入身份证"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="手机号"
						prop="userInfo.phone"
						borderBottom
						ref="item1"
				>
							
					<u--input
							v-model="model1.userInfo.phone"
							placeholder="请输入手机号"
							border="none"
					></u--input>
				</u-form-item>
	 			<u-form-item>
					  <view class="section__title">省市区选择器</view>
					   <picker mode="region" @change="bindRegionChange" :range="array">
					     <view class="picker">
					       当前选择：{{value[0]}}，{{value[1]}}，{{value[2]}}
					     </view>
					   </picker>
	            
	 			</u-form-item>
				<u-form-item
						label="现居详细地址"
						prop="userInfo.de_address"
						borderBottom
						ref="item1"
				>
							
					<u--input
							v-model="model1.userInfo.de_address"
							placeholder="请输入详细地址"
							border="none"
					></u--input>
				</u-form-item>
				
				<!-- 疫苗人群分类 -->
				
				<u-form-item
									label="请选择疫苗人群"
									prop="userInfo.crowd_sort"
									borderBottom
									@click="showSex = true; hideKeyboard()"
									ref="item1"
							>
								<u--input
										v-model="model1.userInfo.crowd_sort"
										disabled
										disabledColor="#ffffff"
										placeholder="请选择疫苗人情"
										border="none"
								></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
								></u-icon>
			  </u-form-item>			
	 		</u--form>
			
			<!-- 具体疫苗 -->
			<view class="vaccinumdetail">
				
				
			</view>
	 		
	</view>
</template>

<script>
	import {getvaccinum} from'@/api/api.js'
export default {
	data() {
		return {
			showSex: false,
			model1: {
				userInfo: {
					name: '',
					sex: '',
				},
			},
			region:['广东省', '广州市', '海珠区'],
			array:[],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.crowd_sort': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false,
			value:[]
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.form1.validateField('userInfo.sex')
		},
		  bindRegionChange: function (e) {
		    console.log('picker发送选择改变，携带值为', e.detail.value)
		    
		      this.value= e.detail.value
			  console.log(this.value);
		    
		  }
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.form1.setRules(this.rules)
    },
};
</script>
<style lang="scss">

.vaccinumdetail{
	
}

</style>
